/**
 * @Description: 向上移动动画效果-原生实现
 * @Author: Zhanghan
 * @Date: 2025-08-02 11:06:06
 * @param {string} className 动画类名 .xxx
 * @param {string} activeClassName 选中类名 xxx_active_xx
 * 页面内不能有重复类名 否则会出现冲突
 */
import { ref, nextTick } from "vue";
function useTransForm() {
  //   const elementArr = document.querySelectorAll(className);
  const elementArr = ref<any>();

  // 公共点击事件
  function handleClick(
    index: number,
    className: string,
    activeClassName: string
  ) {

    const items = document.querySelectorAll(className);
    items.forEach((item) => {
      item.classList.remove(activeClassName);
    });
    items[index].classList.add(activeClassName);
  }

  //添加
  function addTransform(className: string, activeClassName: string) {

    //初始化查询可能没有节点值，必须确保dom加载完毕
    nextTick(() => {
      elementArr.value = document.querySelectorAll(className);
      console.log(elementArr.value);

      if (elementArr.value) {
        // 查询所有节点
        elementArr.value.forEach((item: any, index: number) => {
          item.addEventListener("click", () =>
            handleClick(index, className, activeClassName)
          );
        });
      }
    });
  }

  //销毁
  function destroyEventListeners(className: string, activeClassName: string) {
    const items = document.querySelectorAll(className);
    items.forEach((item) => {
      item.classList.remove(activeClassName);
    });
    if (elementArr.value) {
      elementArr.value.forEach((item: any, index: number) => {
        const handler = () => handleClick(index, className, activeClassName);
        item.removeEventListener("click", handler);
      });
    }
    elementArr.value = null;
  }

  return { addTransform, destroyEventListeners };
}

export { useTransForm };
